<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link href="../../layuiadmin/js/adm/css/bootstrap.css" rel="stylesheet">
    <script src="../../layuiadmin/js/adm/js/vue.js"></script>
    <script src="../../layuiadmin/js/adm/js/vue-resource.js"></script>
    <script src="../../layuiadmin/js/adm/js/jquery.min.js"></script>
    <script src="../../layuiadmin/js/adm/js/bootstrap.js"></script>
    <script src="../../layuiadmin/js/adm/js/getUrlParam.js"></script>
    <script src="../../layuiadmin/js/adm/js/date.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
    <script src="../../layuiadmin/js/adm/js/jquery.cookie.js"></script>
     <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app" class="container-fluid">
        <div class="row" style="border-bottom:1px solid silver" >
            <div class="col-md-4" style="border-right: 1px solid silver;height: 200px;">
                <h4 style="size: 30px;margin-top: 20px"><b><span style="color:rgb(64, 137, 233)">丨</span>案件统计</b></h4>
                <table style="margin-top: 25px;margin-left: 30px;width: 400px">
                    <tr style="text-align: center">
                        <td >
                            <span style="color:rgb(64, 137, 233);font-size: 40px">{{backlog}}</span>
                            <br>审批中
                        </td>
                        <td>
                            <span style="color:rgb(64, 137, 233);font-size: 40px">{{backlogl}}</span>
                            <br>在办
                        </td>
                        <td>
                            <span style="color:rgb(64, 137, 233);font-size: 40px">{{settle}}</span>
                            <br>结案
                        </td>
                        <td>
                            <span style="color:rgb(64, 137, 233);font-size: 40px">0</span>
                            <br>待办事项
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-8" style="height: 200px;padding-left: 80px">
                    <h4 style="size: 30px;margin-top: 20px"><b><span style="color:rgb(64, 137, 233)">丨</span>代收款案件列表</b></h4>
                    <table class="table table-condensed" style="width: 90%;margin-left: 30px" >
                        <thead>
                            <tr>
                                <th>案号</th>
                                <th>案由</th>
                                <th>委托人</th>
                                <th>费用</th>
                                <th>已收款</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in law">
                                <td>{{item.caseId}}</td>
                                <td>{{item.causeOfAction}}</td>
                                <td>{{item.clientId.clientName}}</td>
                                <td>{{item.amountMoney}}</td>
                                <td>{{item.realityMoney}}</td>
                            </tr>
                        </tbody>
                    </table>
            </div>
        </div>
        <div class="row" >
            <div class="col-md-9" style=" height: 640px;padding: 0 60px;border-right: 1px solid silver">
                    <h4 style="size: 30px;"><b><span style="color:rgb(64, 137, 233)">丨</span>日历</b></h4>
                    <el-calendar v-model="value">
                     </el-calendar>
            </div>
            <div class="col-md-3" style=" height: 640px;padding: 0 0 0 25px;">
                <div class="row" style="height: 30%">
                    <h4 style="size: 30px;margin-top: 20px"><b><span style="color:rgb(64, 137, 233)">丨</span>通知公告</b></h4>
                    <p style="margin-left: 30px" v-for="item in notice">{{item.title}}</p>
                </div>
                <div class="row" style="height: 70%;">
                    <h4 style="size: 30px;margin-top: 20px"><b><span style="color:rgb(64, 137, 233)">丨</span>审批中心</b></h4>
                   <div v-for="item in audit" style="margin: 10px 20px">
                       <b>事项：</b><span style="color: silver">{{item.typeid.typeName}}</span><br>
                       <b>状态：</b><span style="color: silver">{{item.state}}</span><br>
                       <b>提交时间：</b><span style="color: silver">{{item.submitTime}}</span><br>
                   </div>
                </div>
            </div>
        </div>

    </div>

   
    <script>
          var vm=new Vue({
            el:'#app',
            data:{
                law:[],
                notice:[],
                audit:[],
                value:new Date(),
                backlog:"",
                backlogl:"",
                settle:""
                
            },
            methods: {
                postlaw(){
                    this.$http.post('http://localhost:8080/home/law',{},{emulateJSON:true}).then(resutl =>{
                        var dat=eval("("+resutl.body+")")
                            this.law=new Array()   //每次重新new一个list集合给定义的list集合
                            for(var i=0;i<dat.length;i++){
                                this.law.push(dat[i])
                            }
                    })
                },
                postnotice(){
                    this.$http.post('http://localhost:8080/home/notice',{},{emulateJSON:true}).then(resutl =>{
                        var dat=eval("("+resutl.body+")")
                            this.notice=new Array()   //每次重新new一个list集合给定义的list集合
                            for(var i=0;i<dat.length;i++){
                                this.notice.push(dat[i])
                            }
                    })
                },
                postaudit(){
                    this.$http.post('http://localhost:8080/home/audit',{},{emulateJSON:true}).then(resutl =>{
                        var dat=eval("("+resutl.body+")")
                            this.audit=new Array()   //每次重新new一个list集合给定义的list集合
                            for(var i=0;i<dat.length;i++){
                                this.audit.push(dat[i])
                            }
                    })
                },
                post1(){
                    this.$http.post('http://localhost:8080/home/backlog',{},{emulateJSON:true}).then(resutl =>{
                       this.backlog=resutl.body
                    })
                },
                post2(){
                    this.$http.post('http://localhost:8080/home/backlogl',{},{emulateJSON:true}).then(resutl =>{
                       this.backlogl=resutl.body
                    })
                },
                post3(){
                    this.$http.post('http://localhost:8080/home/settle',{},{emulateJSON:true}).then(resutl =>{
                       this.settle=resutl.body
                    })
                },
            },
            created () {
                this.postlaw()
                this.postnotice()
                this.postaudit()
                this.post1()
                this.post2()
                this.post3()
            }
        })      
    </script>
</body>
</html>